<template>
  <!-- 客户详情 -->
  <div class="client">
    <div class="header">
      <van-icon name="arrow-left" @click="leftClick"/>
      <van-icon name="wap-home-o" @click="indexClick"/>
    </div>
    <div class="name">
      <img src="../assets/头像.png" alt="" />
      <div class="center">
        <p>名称：<span>{{clientele.custName}}</span></p>
        <p>电话：<span>{{clientele.telephone}}</span></p>
      </div>
      <div class="right" @click="clientClick(clientele.id)">客户信息</div>
    </div>
    <div class="income">
      <van-tabs v-model="active">
        <van-tab>
          <template #title> <van-icon :name="imgSrc1" />收入分析 </template>
          <!-- 内容1 {{ index }} -->
          <!-- 今年收入 -->
          <div class="thisYear">
            <div class="top_t">
              <div class="top">
                <div class="top_l">
                  <p>今年</p>
                  <span>￥{{earning.year}}</span>
                </div>
                <div class="top_l">
                  <p>总收入</p>
                  <span>￥{{earning.total}}</span>
                </div>
              </div>
              <p class="tongbi">同比<span>{{earning.contrast}}</span></p>
            </div>
            <!-- 收入统计 -->
            <div class="shouru">
              <p>
                <span class="span1"
                  ><img src="../assets/收入统计.png" alt=""
                /></span>
                <span class="span2">收入统计</span>
              </p>
              <ul>
                <li v-for="(item,index) in arrList" :key="index">
                  <span>{{item.year}}</span>
                  <span>{{item.income}}</span>
                </li>
              </ul>
            </div>
          </div>
        </van-tab>
        <van-tab>
          <template #title> <van-icon :name="imgSrc2" />旗下企业 </template>
          <!-- 内容2 {{ index }} -->
          <!-- 11111111111111 -->
          <Enterprise :designation="designation" />
        </van-tab>
        <van-tab>
          <template #title> <van-icon :name="imgSrc3" />合作伙伴 </template>
          <!-- 内容 3{{ index }} -->
          <Companion :partner="partner" />
        </van-tab>
        <van-tab>
          <template #title> <van-icon :name="imgSrc4" />当年收入 </template>
          <!-- 内容 4{{ index }} -->
          <Dnshouru :dangn="dangn"/>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {GetClient} from '../raxios/api'
import Enterprise from '../components/Enterprise'
import Companion from '../components/Companion'
import Dnshouru from '../components/Dnshouru'
export default {
  data() {
    return {
      imgSrc1: require("../assets/收入分析.png"),
      imgSrc2: require("../assets/旗下企业-头像.png"),
      imgSrc3: require("../assets/形状 503.png"),
      imgSrc4: require("../assets/当年收入.png"),
      active:3,
      earning:{},
      arrList:[],
      designation:[],
      partner:[],
      dangn:[],
      clientele:{}
    };
  },
  methods:{
    leftClick(){
      this.$router.go(-1)
    },
    indexClick(){
      this.$router.push('/home')
    },
    clientClick(id){
      this.$router.push('/Information?id='+id)
    }
  },
  components:{
    Enterprise,
    Companion,
    Dnshouru,
  },
  created(){
    GetClient(this.$route.query.id).then((res)=>{
      if(res.errCode == 0){
         console.log(res.data);
         this.clientele = res.data;
         this.earning=res.data.datas[0].data;
         this.arrList=res.data.datas[0].data.list;
         this.designation = res.data.datas[3].data;
         this.partner = res.data.datas[2].data;
         this.dangn = res.data.datas[1].data;
      }
     
    })
  }
  
};
</script>
 
<style lang="less" scoped>
.client {
//   position: relative;
   width: 100%;
    height: 100%;
    background-color: #EFEFEF;
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: scroll;
    z-index: 99;
  .header {
    height: 1.6rem;
    background-color: #003399;
    padding: 0.1rem;
    display: flex;
    justify-content: space-between;
   
    .van-icon {
      font-size: 0.28rem;
      color: #fff;
    }
  }
  .name {
    position: absolute;
    top: 0.8rem;
    left: 50%;
    margin-left: -40%;
    width: 80%;
    height: 1rem;
    border-radius: 0.1rem 0.1rem 0 0;
    background-color: #fcfeff;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #efefef;
    z-index: 99;
    img {
      width: 0.7rem;
      height: 0.7rem;
      margin-top: 0.2rem;
      margin-left: 0.2rem;
    }
    .center {
      margin-top: 0.3rem;
    }
    .right {
      background-color: #ffcc33;
      width: 0.75rem;
      height: 0.2rem;
      line-height: 0.2rem;
      text-align: center;
      border-radius: 0.08rem 0 0 0.08rem;
      margin-top: 0.3rem;
      color: #fff;
    }
  }
  /deep/.van-tabs__wrap {
    height: 0.6rem;
    /deep/.van-tabs__nav {
      .van-tabs__line {
        width: 0.56rem;
        background: #ffcc33;
      }
      .van-tab__text {
        display: flex;
        flex-direction: column;
        align-items: center;
        .van-icon {
          img {
            width: 0.2rem;
            height: 0.2rem;
          }
        }
      }
    }
  }
  .thisYear {
    padding: 0.1rem;
    .top_t {
      // height: 1.4rem;
      height: 1.5rem;
      background-color: #fff;
      border-bottom: 1px solid #ccc;
      .top {
        display: flex;
        justify-content: space-between;
        padding: 0.1rem 0.2rem 0;
        .top_l {
          &:nth-child(1) {
            padding-right: 0.4rem;
            border-right: 1px solid #ccc;
          }
          p {
            font-size: 0.16rem;
            margin-top: 0.2rem;
            margin: 0.05rem;
          }
          span {
            color: #ffcc33;
            font-size: 0.24rem;
          }
        }
      }
      .tongbi {
        width: 1rem;
        height: 0.4rem;
        line-height: 0.4rem;
        text-align: center;
        background-color: #f4f6f7;
        border-radius: 0.05rem;
        margin: 0.1rem 0 0 0.2rem;
      }
    }
  }
  .shouru {
    background-color: #fff;
    padding: 0 0.1rem;
    p {
      height: 0.8rem;
      line-height: 0.8rem;
      border-bottom: 1px dashed #ccc;
      .span1 {
          margin-top: .1rem;
        img {
          width: 0.23rem;
          margin-right: 0.1rem;
        }
      }
      .span2 {
        font-size: 0.2rem;
      }
    }
    ul {
      li {
        padding: 0 0.1rem;
        height: 0.4rem;
        line-height: 0.4rem;
        border-bottom: 1px dashed #ccc;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>